<template>
  <div class="app-container">
    <basics-form
      ref="basicsForm"
      :minWidth="isComponent ? '300px' : ''"
      :actionLoading="loading"
      @actionBtnsClick="actionBtnsClick"
      @submit="search"
    />
    <el-table
      v-loading="tableLoading"
      stripe
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="x" label="行政区域" width="180"> </el-table-column>
      <el-table-column prop="a" label="医院名称"> </el-table-column>
      <el-table-column prop="a" label="绿道机构ID"> </el-table-column>
      <el-table-column prop="b" label="联系人"> </el-table-column>
      <el-table-column prop="c" label="联系电话"> </el-table-column>
      <el-table-column prop="d" label="详细地址"> </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        v-if="isComponent"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-check"
            >选定</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="新增"
      :visible.sync="openView"
      width="700px"
      append-to-body
    >
      <basics-form
        style="margin-left: 100px"
        ref="basicsAddForm"
        :titleAligin="'right'"
        :titleWidth="'100px'"
        hiddenMustIcon
        :actionLoading="loading"
        @actionBtnsClick="addAction"
        @submit="addSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import BasicsForm from "@/components/BasicsForm";
export default {
  name: "organi-index",
  components: { BasicsForm },
  props: {
    isComponent: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      loading: false,
      tableLoading: false,
      openView: false, //新增弹出
      total: 25,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      tableData2: [
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
      ],
    };
  },
  created() {
    this.$nextTick(() => {
      this.initRules();
      this.getList();
    });
  },
  methods: {
    //搜索
    search(param) {
      if (!param) {
        return;
      }
      for (let key in param) {
        this.queryParams[key] = param[key];
      }
      this.getList();
    },
    //合并table单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    getList() {
      this.loading = true;
      this.tableLoading = true;
      this.tableData = [];
      setTimeout(() => {
        this.tableData = this.tableData2;
        this.loading = false;
        this.tableLoading = false;
      }, 1000);
    },
    initRules() {
      let rules = [
        {
          title: "行政区域",
          key: "a",
          type: "select",
          selectList: [
            { name: "平卧位", value: "平卧位" },
            { name: "半卧位", value: "半卧位" },
            { name: "坐位", value: "坐位" },
          ],
          selectKey: "value",
          skip: true,
        },
        {
          title: "医院",
          key: "b",
          skip: true,
        },
        {
          type: "actionBtns",
          selectList: [
            { name: "重置", value: "" },
            { name: "搜索", value: "primary" },
          ],
          ruleWidth: "auto",
        },
      ];
      if (!this.isComponent) {
        rules[2].selectList.push({ name: "新增", value: "success" });
      }
      this.$refs.basicsForm.initForm(rules);
    },
    actionBtnsClick(index) {
      if (index == 1) {
        this.$refs.basicsForm.formValid();
      } else if (index == 2) {
        this.openView = true;
        this.$nextTick(() => {
          this.initAddRules();
        });
      } else {
        this.$refs.basicsForm.formReset();
      }
    },
    initAddRules() {
      let rules = [
        {
          title: "医院名称",
          key: "a",
        },
        {
          title: "绿道机构ID",
          key: "a",
        },
        {
          title: "联系人",
          key: "b",
        },
        {
          title: "联系方式",
          key: "c",
        },
        {
          title: "行政区域",
          key: "d",
          type: "select",
          selectList: [
            { name: "平卧位", value: "平卧位" },
            { name: "半卧位", value: "半卧位" },
            { name: "坐位", value: "坐位" },
          ],
          selectKey: "value",
        },
        {
          title: "详细地址",
          key: "e",
          type: "textarea",
        },

        {
          type: "actionBtns",
          selectList: [
            { name: "取消", value: "" },
            { name: "提交", value: "primary" },
          ],
          btnsAligin: "center",
          ruleWidth: "503px",
        },
      ];
      this.$refs.basicsAddForm.initForm(rules);
    },
    addAction(index) {
      if (index) {
        this.$refs.basicsAddForm.formValid();
      } else {
        this.openView = false;
      }
    },
    addSubmit(param) {
      if (!param) {
        return;
      }
      console.log(param, "addSubmit");
    },
  },
};
</script>
